<template>
  <div class="container">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :lg="24">
        <el-form ref="filterForm" :inline="true" :model="listQuery" class="filter-container">
          <el-form-item label="选择年月" prop="date">
            <el-date-picker
              v-model="listQuery.date"
              size="small"
              type="month"
              value-format="yyyy-MM"
              placeholder="选择年月"
              :picker-options="pickerOptions"
              @change="handleFilter"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              size="small"
              type="primary"
              icon="el-icon-search"
              @click="handleFilter"
            >查询</el-button>
            <el-button
              icon="el-icon-download"
              size="small"
              :loading="exportLoading"
              :disabled="exportLoading"
              @click="exportMenuData"
            >报表导出</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :lg="24">
        <el-tabs v-model="tabName" type="border-card">
          <el-tab-pane
            v-for="(item, index) in menuStatistics"
            :key="index"
            :label="item.name"
            :name="item.name"
          >
            <el-row :gutter="20">
              <el-col :xs="24" :sm="24" :lg="24">
                <menu-date-chart
                  v-if="tabName === item.name"
                  :chart-data="item.dateData"
                  :height="'600px'"
                  :chart-title="item.name"
                />
              </el-col>
            </el-row>
            <el-row :gutter="20" class="mt20">
              <el-col :xs="24" :sm="24" :lg="24">
                <menu-use-chart
                  v-if="tabName === item.name"
                  :chart-data="item.menuData"
                  :height="'600px'"
                  :chart-title="item.name"
                />
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  getWechatMenuStatistics,
  exportWechatMenuStatistics
} from '@/api/statistics'
import MenuDateChart from './components/MenuDateChart'
import MenuUseChart from './components/MenuUseChart'
import { blobExport } from '@/utils'

export default {
  name: 'WechatMenuStatistics',
  components: {
    MenuDateChart,
    MenuUseChart
  },
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      listQuery: {
        date: this.$moment().format('YYYY-MM')
      },
      tabName: '',
      menuStatistics: [],
      exportLoading: false
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      getWechatMenuStatistics(this.listQuery).then(response => {
        // console.log(response)
        const { data } = response
        const statisticsData = []
        data.forEach(item => {
          statisticsData.push({
            name: item.name,
            dateData: {
              date: this._.map(item.time, 'time'),
              value: this._.map(item.time, 'count')
            },
            menuData: {
              name: this._.map(item.data, 'name'),
              value: this._.map(item.data, 'count')
            }
          })
        })
        this.menuStatistics = statisticsData
        this.tabName = statisticsData[0].name
        // console.log(this.menuStatistics)
      }).catch(err => {
        console.log(err)
      })
    },
    handleFilter() {
      this.fetchData()
    },
    handleTabClick() {
      this.fetchData()
    },
    exportMenuData() {
      if (this._.isEmpty(this.listQuery.date)) {
        this.$message({
          type: 'warning',
          message: '请选择年月！'
        })
      } else {
        this.exportLoading = true
        exportWechatMenuStatistics(
          this.listQuery
        ).then(response => {
          // console.log(response)
          blobExport(response, `微信菜单使用报表 ${this.listQuery.date}.xlsx`)
          this.$message({
            type: 'success',
            message: '导出成功！',
            duration: 5000
          })
          this.exportLoading = false
        }).catch(err => {
          console.log(err)
          this.exportLoading = false
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 40px;
}
</style>
